---
layout: default
---

<section class="tutorial">
  <section class="sidebar sticky">
    <ul id="sidebar_content_index">
    </ul>
  </section>
  <section class="tutorial-content">
    <h1>{{ page.title }}</h1>

    {% if page.type == "Video" %}
      {% include youtube.html video_id=page.video_id %}

      {% if page.resources %}
        <div class="resources">
          <ul>
            {% for resource in page.resources %}
              <li><a href="{{ resource.link }}">{{ resource.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    {% endif %}
    
    <div class="tutorial-main">
      {{ content }}
    </div>

  </section>
</section>

{% if page.set %}
  {% assign set_file_name = "_sets/" | append: page.set | append: ".md" %}
  {% assign set = site.sets | where: "path", set_file_name | first %}
  {% assign series_posts = site.posts | where: "set", page.set %}
  <div class="tutorial-series">
    <h3>{{ set.title }} - Series</h3>
    <p>{{ set.description }}</p>

    {% include listings.html listings=series_posts numbered=true%}
  </div>
{% endif %}
{% assign related_posts = site.related_posts %}
{% assign related_posts_size = related_posts | size %}
{% if related_posts_size > 0 %}
  <div class="related">
    {% if site.active_lang == 'en' %}
      <h4>These may also helps:</h4>
    {% else %}
      <h4>这些或许也能帮助到你：</h4>
    {% endif %}

    {% include listings.html listings=site.related_posts %}
  </div>
{% endif %}


<script src="{{ site.url }}/js/main.js"></script>

<script>
  var headings = document.querySelectorAll("h2[id]");

  //console.log(headings);
  for (var i = 0; i < headings.length; i++) {
    var anchorLink = document.createElement("a");
    anchorLink.innerText = headings[i].innerText;
    anchorLink.href = "#" + headings[i].id;
    anchorLink.classList.add("header-link");
    //console.log(anchorLink);
    document.querySelector("#sidebar_content_index").appendChild(anchorLink);
    //headings[i].appendChild(anchorLink);
  }

  $(".modalOpen").click(function() {
    var id = $(this).attr("href");
    $(id).addClass("show");

    $(window).click(function() {
      $(".show").removeClass("show");
    });

    $(id + " > div").click(function(event){
      event.stopPropagation();
    });
    return false;
  });

  $(".close").click(function() {
    $(".show").removeClass("show");
    return false;
  });

  $(document).keyup(function(e) {
    if (e.keyCode == 27) {
      $(".show").removeClass("show");
    }
  });
</script>
